<!-- padding, margin -->

<div class="row colwidths"  *ngIf="type !=='Image' && type !=='Video'"  >
    <div class="col-sm-6" style="padding-right: 30px;">
        <div class="row">
            <div class="col-sm-6">
                <h5>容器 Padding</h5>
            </div>
            <div class="col-sm-6  text-right">
                <div class="form-group">
                    更多选项 <p-inputSwitch [(ngModel)]="PaddingMoreOptions" (onChange)="PaddingAllSides()">
                    </p-inputSwitch>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="!PaddingMoreOptions">
            <div class="col-sm-2">
                顶部
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.padding.top" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px">
                    </p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                右侧
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.padding.right" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px">
                    </p-inputNumber>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="!PaddingMoreOptions">
            <div class="col-sm-2">
                左侧
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.padding.left" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                底部
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.padding.bottom" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="PaddingMoreOptions">
            <div class="col-sm-2">
                All Sides
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.padding.top" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" (onBlur)="PaddingAllSides()">
                    </p-inputNumber>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6" style="padding-left: 30px;">
        <div class="row">
            <div class="col-sm-6">
                <h5>容器 Margin</h5>
            </div>
            <div class="col-sm-6  text-right">
                <div class="form-group">
                    更多选项 <p-inputSwitch [(ngModel)]="MarginMoreOptions" (onChange)="MarginAllSides()">
                    </p-inputSwitch>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="!MarginMoreOptions">
            <div class="col-sm-2">
                顶部
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.margin.top" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                右侧
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.margin.right" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="!MarginMoreOptions">
            <div class="col-sm-2">
                左侧
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.margin.left" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                底部
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.margin.bottom" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px"></p-inputNumber>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="MarginMoreOptions">
            <div class="col-sm-2">
                All Sides
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.margin.top" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" (onBlur)="MarginAllSides()">
                    </p-inputNumber>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- border   borderRadius-->
<div class="row colwidths2">
    <div class="col-sm-6" style="padding-right: 30px;">
        <div class="row">
            <div class="col-sm-6">
                <h5>边框</h5>
            </div>
            <div class="col-sm-6  text-right">
                <div class="form-group">
                    更多选项 <p-inputSwitch [(ngModel)]="BorderMoreOptions" (onChange)="BorderAllSides()">
                    </p-inputSwitch>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="BorderMoreOptions">
            <div class="col-sm-2">
                顶部
            </div>
            <div class="col-sm-10" >
                <div class="row" >
                    <div class="col-sm-4">
                        <div class="form-group">
                            <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.border.top.width" [step]="1" [min]="0"
                            [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                            decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"  suffix="px">
                            </p-inputNumber>
                        </div>
                    </div>
                    <div class="col-sm-4 text-center">
                        <div class="form-group"  style="display:flex">
                            <p-colorPicker [(ngModel)]="data.border.top.color"></p-colorPicker>
                            <input type="text" class="form-control" maxlength="7" style="width:80px" [(ngModel)]="data.border.top.color" name="databordertopcolor"/>
                        </div>
                    </div>
                    <div class="col-sm-4  text-right">
                        <div class="form-group">
                            <select class="form-control" name="bordertopstyle"
                                [(ngModel)]="data.border.top.style">
                                <option *ngFor="let rec of borderStyle" [value]="rec.value">{{rec.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row" *ngIf="BorderMoreOptions">
            <div class="col-sm-2">
                右侧
            </div>
            <div class="col-sm-10">
                <div class="row" >
                    <div class="col-sm-4">
                        <div class="form-group">
                            <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.border.right.width" [step]="1" [min]="0"
                            [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                            decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px">
                            </p-inputNumber>
                        </div>
                    </div>
                    <div class="col-sm-4 text-center">
                        <div class="form-group"  style="display:flex">
                            <p-colorPicker [(ngModel)]="data.border.right.color"></p-colorPicker>
                            <input type="text" class="form-control" maxlength="7" style="width:80px" [(ngModel)]="data.border.right.color" name="databorderrightcolor" />
                        </div>
                    </div>
                    <div class="col-sm-4  text-right">
                        <div class="form-group">
                            <select class="form-control" name="borderrightstyle"
                                [(ngModel)]="data.border.right.style">
                                <option *ngFor="let rec of borderStyle" [value]="rec.value">{{rec.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row" *ngIf="BorderMoreOptions">
            <div class="col-sm-2">
                左侧
            </div>
            <div class="col-sm-10">
                <div class="row" >
                    <div class="col-sm-4">
                        <div class="form-group">
                            <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.border.left.width" [step]="1" [min]="0"
                            [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                            decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"  suffix="px">
                            </p-inputNumber>
                        </div>
                    </div>
                    <div class="col-sm-4 text-center">
                        <div class="form-group"  style="display:flex">
                            <p-colorPicker [(ngModel)]="data.border.left.color"></p-colorPicker>
                            <input type="text" class="form-control" maxlength="7" style="width:80px" [(ngModel)]="data.border.left.color" name="databorderleftcolor" />
                        </div>
                    </div>
                    <div class="col-sm-4  text-right">
                        <div class="form-group">
                            <select class="form-control" name="borderleftstyle"
                                [(ngModel)]="data.border.left.style">
                                <option *ngFor="let rec of borderStyle" [value]="rec.value">{{rec.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row" *ngIf="BorderMoreOptions">
            <div class="col-sm-2">
                底部
            </div>
            <div class="col-sm-10">
                <div class="row" >
                    <div class="col-sm-4">
                        <div class="form-group">
                            <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.border.bottom.width" [step]="1" [min]="0"
                            [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                            decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"  suffix="px">
                            </p-inputNumber>
                        </div>
                    </div>
                    <div class="col-sm-4 text-center">
                        <div class="form-group"  style="display:flex">
                            <p-colorPicker [(ngModel)]="data.border.bottom.color"></p-colorPicker>
                            <input type="text" class="form-control" maxlength="7" style="width:80px" [(ngModel)]="data.border.bottom.color" name="databorderbottomcolor" />
                        </div>
                    </div>
                    <div class="col-sm-4  text-right">
                        <div class="form-group">
                            <select class="form-control" name="borderbottomstyle"
                                [(ngModel)]="data.border.bottom.style">
                                <option *ngFor="let rec of borderStyle" [value]="rec.value">{{rec.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="!BorderMoreOptions">
            <div class="col-sm-2">
                All Sides
            </div>
            <div class="col-sm-10">
                <div class="row" >
                    <div class="col-sm-4">
                        <div class="form-group">
                            <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.border.top.width" [step]="1" [min]="0"
                            [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                            decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                            incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" (onBlur)="BorderAllSides()" suffix="px">
                            </p-inputNumber>
                        </div>
                    </div>
                    <div class="col-sm-4 text-center">
                        <div class="form-group"  style="display:flex">
                            <p-colorPicker [(ngModel)]="data.border.top.color" (onChange)="BorderAllSides()"></p-colorPicker>
                            <input type="text" class="form-control" maxlength="7" style="width:80px" [(ngModel)]="data.border.top.color" name="databordertopcolor2"  (change)="BorderAllSides()"/>
                        </div>
                    </div>
                    <div class="col-sm-4  text-right">
                        <div class="form-group">
                            <select class="form-control" name="bordertopstyle2"
                                [(ngModel)]="data.border.top.style"  (change)="BorderAllSides()" >
                                <option *ngFor="let rec of borderStyle" [value]="rec.value">{{rec.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6"  style="padding-left: 30px;">
        <div class="row">
            <div class="col-sm-6">
                <h5>圆角边框</h5>
            </div>
            <div class="col-sm-6  text-right">
                <div class="form-group">
                    更多选项 <p-inputSwitch [(ngModel)]="BorderRadiusMoreOptions" (onChange)="BorderRadiusAllSides()">
                    </p-inputSwitch>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="BorderRadiusMoreOptions">
            <div class="col-sm-2">
                左上角
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.borderRadius.topLeft" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" >
                    </p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                右上角
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.borderRadius.topRight" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" >
                    </p-inputNumber>
                </div>
            </div>
        </div>

        <div class="row" *ngIf="BorderRadiusMoreOptions">
            <div class="col-sm-2">
                左下角
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.borderRadius.bottomLeft" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" >
                    </p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                右下角
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.borderRadius.bottomRight" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" >
                    </p-inputNumber>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="!BorderRadiusMoreOptions">
            <div class="col-sm-2">
                All Sides
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.borderRadius.topLeft" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px" (onBlur)="BorderRadiusAllSides()" >
                    </p-inputNumber>
                </div>
            </div>
        </div>
    </div>
</div>

<hr>
<!-- backgroundColor -->
<div *ngIf="type !=='Image' && type !=='Video'" class="row">
    <div class="col-sm-6"  style="padding-right: 30px;">
        <div class="row">
            <div class="col-sm-2">背景色</div>
            <div class="col-sm-6">
                <div class="form-group " style="display:flex">
                    自定义 <p-inputSwitch [(ngModel)]="data.backgroundColor.diy" >
                    </p-inputSwitch> &nbsp;
                    <p-colorPicker *ngIf="data.backgroundColor.diy" [(ngModel)]="data.backgroundColor.color"></p-colorPicker>
                    <input type="text" maxlength="7" *ngIf="data.backgroundColor.diy" class="form-control" style="width:80px;;" [(ngModel)]="data.backgroundColor.color" name="backgroundColor"/>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 宽度，对齐方式 -->
<div *ngIf="type ==='Image' || type ==='Video'" class="row">
    <div class="col-sm-6"  style="padding-right: 30px;">
        <div class="row" >
            <div class="col-sm-2" *ngIf="type ==='Image'">
                图片宽度
            </div>
            <div class="col-sm-2" *ngIf="type ==='Video'">
                视频宽度
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.width.value" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="%">
                    </p-inputNumber>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6"   style="padding-left: 30px;">
        <div class="row" >
            <div class="col-sm-2">
                水平对齐
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <button pButton type="button" icon="fa fa-align-left" (click)="textAlign('left')" [ngClass]="{'p-button-outlined':data.textAlign.value !== 'left'}"  class="p-button-outlined mr-1"></button>
                    <button pButton type="button" icon="fa fa-align-center" (click)="textAlign('center')" [ngClass]="{'p-button-outlined':data.textAlign.value !== 'center'}"  class="mr-1" ></button>
                    <button pButton type="button" icon="fa fa-align-right" (click)="textAlign('right')"  [ngClass]="{'p-button-outlined':data.textAlign.value !== 'right'}" class="p-button-outlined"></button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- textColor  textAlign lineHeight  fontSize  -->
<div *ngIf="type ==='Text' || type ==='Html' || type ==='Heading'" class="row">
    <div class="col-sm-6"   style="padding-right: 30px;">
        <div class="row" >
            <div class="col-sm-2">
                字体颜色
            </div>
            <div class="col-sm-4">
                <div class="form-group" style="display: flex;">
                    <p-colorPicker [(ngModel)]="data.textColor.color"></p-colorPicker>
                    <input type="text"  maxlength="7" class="form-control" style="width:80px" [(ngModel)]="data.textColor.color" name="datatextColorcolor"/>
                </div>
            </div>
            <div class="col-sm-2">
                水平对齐
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <button pButton type="button" icon="fa fa-align-left" (click)="textAlign('left')" [ngClass]="{'p-button-outlined':data.textAlign.value !== 'left'}"  class="p-button-outlined mr-1"></button>
                    <button pButton type="button" icon="fa fa-align-center" (click)="textAlign('center')" [ngClass]="{'p-button-outlined':data.textAlign.value !== 'center'}"  class="mr-1" ></button>
                    <button pButton type="button" icon="fa fa-align-right" (click)="textAlign('right')"  [ngClass]="{'p-button-outlined':data.textAlign.value !== 'right'}" class="p-button-outlined"></button>
                </div>
            </div>
        </div>
    </div>
 
    <div class="col-sm-6"   style="padding-left: 30px;">
        <div class="row" >
            <div class="col-sm-2">
                行高
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.lineHeight.value" [step]="1" [min]="0"
                        [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                        decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                        incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px">
                    </p-inputNumber>
                </div>
            </div>
            <div class="col-sm-2">
                字体大小
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <p-inputNumber [inputStyle]="{'width':'50%'}" [(ngModel)]="data.fontSize.value" [step]="1" [min]="0"
                    [showButtons]="true" buttonLayout="horizontal" spinnerMode="horizontal"
                    decrementButtonClass="btn-default" incrementButtonClass="btn-default"
                    incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" suffix="px">
                    </p-inputNumber>
                 </div>
            </div>
        </div>
    </div>
</div>